<template>
  <div id="app">
    <router-view></router-view>
    <div class="system-info">
      <ul>
        <li>主机名称:{{hostMachine.hostname}}</li>
        <li>MAC:{{hostMachine.macAddress}}</li>
      </ul>
    </div>
    <el-dialog
      title="正在更新新版本,请稍候..."
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      center
    >
      <div style="width:100%;height:20vh;line-height:20vh;text-align:center">
        <el-progress
          status="success"
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          :width="strokeWidth"
          :show-text="true"
        ></el-progress>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let ipcRenderer = require("electron").ipcRenderer;
let _this = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
  console.log(arg);
  if ("update-available" == arg.cmd) {
    _this.dialogVisible = true;
  } else if ("download-progress" == arg.cmd) {
    console.log(arg.message.percent);
    let percent = Math.round(parseFloat(arg.message.percent));
    _this.percentage = percent;
  } else if ("error" == arg.cmd) {
    _this.dialogVisible = false;
    _this.$message("更新失败");
  }
});
//20秒后开始检测新版本
let timeOut = window.setTimeout(() => {
  ipcRenderer.send("checkForUpdate");
}, 20000);
clearTimeout;
//间隔1小时检测一次
let interval = window.setInterval(() => {
  ipcRenderer.send("checkForUpdate");
}, 3600000);

export default {
  name: "App",
  data() {
    return {
      dialogVisible: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      percentage: 0,
      strokeWidth: 200,
      hostMachine: {
        hostname: "",
        macAddress: ""
      }
    };
  },
  mounted() {
    _this = this;
    ipcRenderer.send("getHostMachine");
    ipcRenderer.on("hostMachine-message", (event, arg) => {
      if (arg.cmd === "os-info") {
        console.log(arg);
        _this.hostMachine.hostname = arg.message.hostname;
        _this.hostMachine.macAddress = arg.message.macAddress;
      }
    });
  },
  destroyed() {
    window.clearInterval(interval);
    window.clearInterval(timeOut);
  }
};
</script>
<style scoped>
#app {
  height: 100%;
}
.system-info {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-size: 12px
}
.system-info ul {
  margin: 0;
  padding: 5px;
}
.system-info ul li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
</style>
